{layout name="layout2" /}
<style>
    .div-flex {
        display: flex;
        align-items: center;
        justify-content: left;
    }

    .layui-form-label {
        width: 100px;
    }

    .width-160 {
        width: 200px;
    }

    .layui-table th {
        text-align: center;
    }

    .table-margin {
        margin-left: 50px;
        margin-right: 50px;
        text-align: center;
    }

    .image {
        height: 80px;
        width: 80px;
    }

    .goods-li {
        float: left;
        opacity: 1;
        position: relative;
    }
    .goods-img {
        width: 80px;
        height: 80px;
        padding: 4px;
    }
    .goods-img-del-x {
        display: none;
        position: absolute;
        z-index: 100;
        top: -4px;
        right: -2px;
        width: 20px;
        height: 20px;
        font-size: 16px;
        line-height: 16px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        background: hsla(0, 0%, 60%, .6);
        border-radius: 10px;
    }
</style>

<div class="layui-card-body" >
    <!--基本信息-->
    <div class="layui-form" lay-filter="layuiadmin-form-express" id="layuiadmin-form-express" >
        <input type="hidden" name="order_id" value="{$detail.id}">


        <div class="layui-form-item">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>线下确认收款</legend>
            </fieldset>
        </div>



        <div class="layui-form-item div-flex select-express" >
            <label class="layui-form-label ">凭证备注:</label>
            <div>
                <textarea name="payment_remark"  placeholder="凭证备注" class="layui-textarea">{$detail.payment_remark}</textarea>
            </div>
        </div>

        <div class="layui-form-item div-flex">
            <label class="layui-form-label ">确认收款:</label>
            <div>
                <input type="radio" name="pay_status" lay-filter="express" value="0" title="未支付"  {eq name="detail.pay_status" value="0"} checked{/eq} >
                <input type="radio" name="pay_status" lay-filter="express" value="1" title="已支付" {eq name="detail.pay_status" value="1"} checked{/eq}>
            </div>
        </div>


        <div class="layui-form-item" style="margin-bottom: 0px">
            <label class="layui-form-label"><span class="form-label-asterisk"></span>上传支付凭证：</label>
            <div class="" style="height:80px;line-height:80px">
                <ul>
                </ul>
                <div class="delivery-img-add" lay-verify="goods_image" lay-verType="tips" switch-tab="0" verify-msg="至少选择一张图片"></div>
                <br>
                <br>
            </div>
        </div>

        <div class="layui-form-item div-flex ">
            <div class="layui-input-block ">
                <input type="button" class="layui-btn layui-btn-sm layui-btn-normal width_160" lay-submit lay-filter="send" id="send" value="确认收款">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary width_160 " id="back">返回</button>
            </div>
        </div>
    </div>
</div>

<!---------------------------------html模板---------------------------------->
<script type="text/html" id="template-delivery-image">
    <li class="goods-li">
        <input name="payment_images[]" type="hidden" value="{image-src}">
        <img class="goods-img goods_image" src="{image-src}">
        <a class="goods-img-del-x" >x</a>
    </li>
</script>

<script type="text/javascript">
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作

    layui.config({
        version:"{$front_version}",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'element', 'jquery', 'like', 'form'], function () {
        var $ = layui.$
            , form = layui.form;
        var like = layui.like;

        //主图放大
        $(document).on('click', '.image-show', function () {
            var src = $(this).attr('src');
            like.showImg(src,600);
        });


        $('#back').click(function () {
            var index=parent.layer.getFrameIndex(window.name); //获取当前窗口的name
            parent.layer.close(index);
            parent.layui.table.reload('order-lists');
            return true;
        });

        like.imageUpload('.delivery-img-add', function (uris, element) {
            var count = element.prev().children().length;
            count = !count ? 0:count;
            if (count+uris.length > 3) {
                layer.msg('最多最能选中3张图片');
                return;
            }
            uris = uris.reverse();
            for(var i in uris){
                var uri = uris[i];
                var template_goods_image = $('#template-delivery-image').html();
                element.prev().append(template_goods_image.replace('{image-src}', like.getUrlFileName(uri, '{$storageUrl}')).replace('{image-src}', uri));
            }
        }, true);
        {notempty name='detail'}
        var image_html = '';
        var detail = {$detail|raw|default=''};
        console.log('详情');
        console.log(detail);

        for(var i in detail['payment_images']) {
            var template_goods_image = $('#template-delivery-image').html();
            console.log(i)
            console.log(detail['payment_images'][i]);
            image_html+= template_goods_image.replace('{image-src}',detail['payment_images'][i]).replace('{image-src}',  '/'+detail['payment_images'][i]);
        }
        if(image_html) {
            $('.delivery-img-add').parent().find('ul').append(image_html);
        }
        {/notempty}

        //删除图片
        $(document).on('click', '.img-del-x', function () {
            $(this).parent().siblings('input').val('');
            $(this).parent().prev().css('display','block');
            $(this).parent().remove();
        });
        //显示图片
        $(document).on('click', '.img-src', function () {
            var image = $(this).attr('src');
            like.showImg(image, 600);
        });


            $(document).on('click', '.goods-img-del-x', function () {

                if($(this).hasClass('goods-image-del')){
                    $(this).parent().next().show();
                    $(this).parent().children().remove();
                }

                $(this).parent().remove();
                return false;
            });


            //确认线下付款
        form.on('submit(send)', function (data) {
            var field = data.field;
            like.ajax({
                url: '{:url("order/proofOfPayment")}'
                , data: field
                , type: 'post'
                , success: function (res) {
                    if (res.code == 1) {
                        layui.layer.msg(res.msg, {
                            offset: '15px'
                            , icon: 1
                            , time: 1000
                        },function () {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.location.reload();
                            parent.layer.close(index);
                        });
                    }
                },
            });
        })

    });
</script>